<template>
	<view class="u-wrap">
		<view :class="['coupon-item', item.is_use ? 'is-use' : '']" v-for="item in couponList" :key="item.id" @click="useCoupon(item)">
      <view class="left">
				<view class="sum">
					￥
					<text class="num">{{ item.value }}</text>
				</view>
				<view class="type">满{{ item.mini_value }}元可用</view>
			</view>
			<view class="right">
				<view class="top">
					<view class="title">
						<text class="tag">限时使用</text>
						<text>{{ item.name }}</text>
					</view>
					<view class="bottom">
						<view class="date u-line-1">{{ item.start_time }} - {{ item.end_time }}</view>
					</view>
				</view>
        <div style="display: flex;padding-bottom: 20rpx" >
          <view class="immediate-use">{{ item.is_use ? '已使用' : '立即使用'}}</view>
        </div>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
    return {
      source: 0,
      couponList: [

      ]
    }
  },
  onLoad({ source }) {
    this.source = source || 0
    // 获取优惠券列表
    this.$api.couponList({
      member_id: uni.getStorageSync('userInfo').id
    }).then(res => {
      this.couponList = res.map(el => {
        return {
          is_use: el.is_use,
          coupon_member_id: el.id,
          ...el.coupon
        }
      })
    })
  },
  methods: {
    useCoupon(item) {
      if (item.is_use) return
      if(this.source == 1){
        //this.$api.prePage()获取上一页实例，在App.vue定义
        if (this.$prePage().setCoupon(item)) {
          uni.navigateBack()
        };
        // 上一页实例
      } else {
        uni.switchTab({
          url: '/pages/category/category'
        })
      }
    }
  }
};
</script>

<style lang="scss" scoped>
page {
	height: 100%;
	background-color: rgb(244, 244, 244);
}
.u-wrap {
	padding: 24rpx;
}
.coupon-item {
	margin-top: 40rpx;
	background-color: #ffffff;
	display: flex;
	.left {
		padding: 0 30rpx;
		background-color: rgb(95, 148, 224); //rgb(94, 152, 225);
		text-align: center;
		font-size: 28rpx;
		color: #ffffff;
		.sum {
			margin-top: 50rpx;
			font-weight: bold;
			font-size: 32rpx;
			.num {
				font-size: 80rpx;
			}
		}
		.type {
			margin-bottom: 50rpx;
			font-size: 24rpx;
		}
	}
  &.is-use .left {
    // 被使用
    background-color: #999999;
  }
  &.is-use .right {
    // 被使用
    .top .title .tag {
      background-color: #999999;
    }
    .immediate-use {
      border: 2rpx solid #999999;
      color: #999999;
    }
  }
	.right {
    flex-grow: 1;
		padding: 20rpx 20rpx 0;
		font-size: 28rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .immediate-use {
      height: auto;
      padding: 0 20rpx;
      font-size: 24rpx;
      border-radius: 40rpx;
      line-height: 40rpx;
      color: rgb(117, 142, 165);
      border: 2rpx solid rgb(117, 142, 165);
    }
		.top {
			.title {
				margin-right: 60rpx;
				line-height: 40rpx;
				.tag {
					padding: 4rpx 20rpx;
					background-color: rgb(73, 154, 201);
					border-radius: 20rpx;
					color: #ffffff;
					font-weight: bold;
					font-size: 24rpx;
					margin-right: 10rpx;
				}
			}
			.bottom {
				display: flex;
				margin-top: 20rpx;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 10rpx;
				.date {
					font-size: 20rpx;
					flex: 1;
				}

			}
		}
		.tips {
			width: 100%;
			line-height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			.transpond {
				margin-right: 10rpx;
			}
			.explain {
				display: flex;
				align-items: center;
			}
			.particulars {
				width: 30rpx;
				height: 30rpx;
				box-sizing: border-box;
				padding-top: 8rpx;
				border-radius: 50%;
				background-color: $u-type-info-disabled;
				text-align: center;
			}
		}
	}
}
</style>
